import React from 'react';
import { Select, Radio } from 'antd';
import axios from 'axios';
import Input from 'shared/input';
import AlertModule from 'shared/AlertModule';
import { apiPrefix } from 'shared/api';
import './index.less';

const { Option } = Select;

class rosterForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldType: [],
      roster: {},
      visible: false,
      change: false,
      value: true,
    };
  }
  componentDidMount() {
    if (this.props.match.params.id !== undefined) {
      const api = `${apiPrefix}api/v1/roster/dynamic?id=${this.props.match.params.id}`;
      axios.get(api)
        .then((response) => {
          console.log(response);
          this.setState({ roster: response.data.data });
        });
    } else {
      const api = `${apiPrefix}api/v1/roster/dynamic_field_type`;
      axios.get(api)
        .then((response) => {
          console.log(response);
          this.setState({ fieldType: response.data.data });
        });
    }
  }
  handlOnChange=(val, key) => {
    const { roster } = this.state;
    roster[key] = val;
    if (key === 'isrequired') {
      this.setState({ value: val });
    }
    this.setState({ roster: { ...this.state.roster }, change: true });
    console.log(roster);
  }
  redirectToRoster() {
    this.props.history.push('/system/roster');
  }
  showAlertModule=() => {
    if (this.state.change === true) {
      this.setState({ visible: true });
    } else {
      this.redirectToRoster();
    }
  }
  closeAlertModule=() => {
    this.setState({ visible: false });
  }
  historyPush=() => {
    this.redirectToRoster();
    this.setState({ visible: false });
  }
  sureAdd=() => {
    const { roster } = this.state;
    console.log(roster);
    const api = `${apiPrefix}api/v1/roster/dynamic`;
    axios.post(api, roster)
      .then(() => {
        this.redirectToRoster();
      });
  }
  render() {
    const { fieldType, roster } = this.state;
    const id = this.props.match.params.id;
    return (
      <div className="content">
        <div>
          <h3>{id ? '添加花名册属性' : '修改花名册属性'}</h3>
          <div className="form">
            <div className="absolute1">
              <Input
                label="字段名称"
                placeholder="必须填"
                inputKey="name"
                value={roster.name}
                onChange={(value, key) => (this.handlOnChange(value, key))}
              />
            </div>
            <div className="radio">
              <span>是否必填</span>
              <Radio.Group onChange={e => this.handlOnChange(e.target.value, 'isrequired')} value={this.state.roster.isrequired}>
                <Radio value>是</Radio>
                <Radio value={false}>否</Radio>
              </Radio.Group>
            </div>
            <div className="absolute3">
              <span>字段类型</span>
              <Select
                showSearch
                style={{ width: 200, marginLeft: 20, }}
                placeholder="请选择字段类型"
                optionFilterProp="children"
                value={roster.field_type}
                onChange={value => this.handlOnChange(value, 'field_type')}
                filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {
                    fieldType.map((value, index) => (
                      <Option value={value.id} key={index}>{value.name}</Option>
                  ))
              }
              </Select>
            </div>
            <div className="roster-button">
              <button className="sure-button" onClick={this.sureAdd}>保存</button>
              <button className="cancel-button" onClick={this.showAlertModule}>取消</button>
              <AlertModule visible={this.state.visible} onCancel={this.closeAlertModule} onOk={this.historyPush} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default rosterForm;
